<template>
  <div class="app-container">
    <el-card>
      <!-- 步骤条 -->
      <el-steps :active="active" finish-status="success">
        <el-step title="基本信息" />
        <el-step title="规格参数" />
        <el-step title="销售属性" />
        <el-step title="SKU信息" />
        <el-step title="发布信息" />
      </el-steps>

      <!-- 表单 -->
      <el-card class="card-box">
        <el-form :model="form" label-width="auto">
          <el-form-item label="商品名称">
            <el-input v-model="form.name" style="width: 200px" />
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input v-model="form.desc" type="textarea" style="width: 400px" />
          </el-form-item>
          <el-form-item label="所属分类">
            <el-cascader
              v-model="form.catId"
              :options="options"
              :props="cascaderProps"
              filterable
              @change="changeAttr"
            />
          </el-form-item>
          <el-form-item label="选择品牌">
            <el-cascader
              v-model="form.catId"
              :options="options"
              :props="cascaderProps"
              filterable
              @change="changeAttr"
            />
          </el-form-item>
          <el-form-item label="商品重量(kg)">
            <el-input-number v-model="num" :precision="2" :step="0.1" :max="100" />
          </el-form-item>
          <el-form-item label="设置积分">
            <div class="flex flex-wrap items-center gap-4">
              金币
              <el-input-number
                v-model="num"
                :min="1"
                :max="10"
                controls-position="right"
                @change="handleChange"
              />
              成长值
              <el-input-number
                v-model="num"
                :min="1"
                :max="10"
                controls-position="right"
                @change="handleChange"
              />
            </div>
          </el-form-item>
          <el-form-item label="商品介绍">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <el-icon><Plus /></el-icon>

              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <el-icon><Download /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <el-icon><Delete /></el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>

            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="商品图集">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <el-icon><Plus /></el-icon>

              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <el-icon><Download /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <el-icon><Delete /></el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>

            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
        </el-form>
        <el-button type="success" @click="onSubmit">下一步:设置基本参数</el-button>
      </el-card>
    </el-card>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
//当前所在步骤
const active = ref(0)
//分类多级列表
const options = ref([])
//级联选择器属性配置
const cascaderProps = {
  multiple: false, //是否可以多选，false:单选，true:多选
  checkStrictly: false, // false不允许选择任意级别,只能选择最后一级
  value: 'catId',
  label: 'name',
  children: 'children',
  emitPath: false //在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
}
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style lang="scss" scoped>
//
.card-box {
  margin-top: 30px;
  margin-left: 150px;
  margin-right: 150px;
}
</style>
